<template>
	<form id="user-regist">
		<h3>注册</h3>
		<input type="text" name="uname" id="uname" placeholder="请输入名字" required/>
		<input type="password" name="upsd" id="upsd1" placeholder="请输入密码" required/>
		<input type="password" name="upsd" id="upsd2" placeholder="请再次输入密码" required/>
		<input type="tel" name="usertel" id="usertel" placeholder="请输入手机号" pattern="/^1\d{10}$/" required/>
		<div class="user-re">
			<router-link to='./mine' tag='button'>登录</router-link >
			<button @click="regist">注册</button>
		</div>
	</form>
</template>

<script>
	export default{
		name: 'regist',
		methods: {
			regist(){
				var psd1 = document.getElementById('upsd1').value
				var psd2 = document.getElementById('upsd2').value
				if (psd1 !==psd2) {
					alert('两次输入密码不一致')	
				}
			}
		}
	}
</script>

<style>
	#user-regist h3{width: 100%;height: 50px;text-align: center;font-size: 30px;line-height: 50px;}
	#user-regist input{width: 100%;height: 50px;margin-top: 40px;background: #D8D9F3;
	padding-left: 20px;font-size: 18px;border-radius: 25px;border: 1px solid #6495ED;}
	.user-re{ width: 100%;height: 50px;margin-top: 50px;padding-top: 5px;display: flex;justify-content: space-around;}
	.user-re button{ width: 100px;height: 40px;font-size: 20px;background: #6495ED;
	color: white;border: 1px solid #6495ED;border-radius: 5px;box-shadow: 2px 2px 5px #CCCCCC;}
</style>